<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M361.1 86.4H198.9c-66.8 0-121.1 54.3-121.1 121.1v162.2c0 66.8 54.3 121.1 121.1 121.1h162.2c66.8 0 121.1-54.3 121.1-121.1V207.6c0-66.8-54.3-121.2-121.1-121.2z m57.1 283.3c0 31.5-25.6 57.1-57.1 57.1H198.9c-31.5 0-57.1-25.6-57.1-57.1V207.6c0-31.5 25.6-57.1 57.1-57.1h162.2c31.5 0 57.1 25.6 57.1 57.1v162.1zM361.1 533.1H198.9c-66.8 0-121.1 54.3-121.1 121.1v162.2c0 66.8 54.3 121.1 121.1 121.1h162.2c66.8 0 121.1-54.3 121.1-121.1V654.3c0-66.8-54.3-121.2-121.1-121.2z m57.1 283.3c0 31.5-25.6 57.1-57.1 57.1H198.9c-31.5 0-57.1-25.6-57.1-57.1V654.3c0-31.5 25.6-57.1 57.1-57.1h162.2c31.5 0 57.1 25.6 57.1 57.1v162.1zM934.8 853.1L892.7 818c13.8-27.2 21-57.1 21-88.1 0-107.7-87.6-195.4-195.4-195.4s-195.4 87.6-195.4 195.4 87.6 195.4 195.4 195.4c18.6 0 37-2.6 54.7-7.8 17-4.9 26.7-22.7 21.8-39.7-4.9-17-22.7-26.7-39.7-21.8-11.9 3.5-24.3 5.2-36.8 5.2-72.4 0-131.4-58.9-131.4-131.4 0-72.4 58.9-131.4 131.4-131.4 72.4 0 131.4 58.9 131.4 131.4 0 27.3-8.3 53.4-23.9 75.6-10.4 13.5-8.4 33 4.8 44.1l63.2 52.8c6 5 13.3 7.4 20.5 7.4 9.2 0 18.2-3.9 24.6-11.5 11.3-13.6 9.4-33.7-4.1-45.1zM643.5 490.9h162.2c66.8 0 121.1-54.3 121.1-121.1V207.6c0-66.8-54.3-121.1-121.1-121.1H643.5c-66.8 0-121.1 54.3-121.1 121.1v162.2c0 66.7 54.3 121.1 121.1 121.1z m-57.1-283.3c0-31.5 25.6-57.1 57.1-57.1h162.2c31.5 0 57.1 25.6 57.1 57.1v162.2c0 31.5-25.6 57.1-57.1 57.1H643.5c-31.5 0-57.1-25.6-57.1-57.1V207.6z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
